import * as React from 'react';
import { forwardRef } from 'react';
import './index.scss';


// 确保createElement可用
const { createElement } = React;

export interface StatusBarProps {
  /**
   * 左侧中文文字
   */
  chineseText?: string;

  /**
   * 中间英文文字
   */
  englishText?: string;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;
  iconUrl?: string; // 新增：可选icon图片地址

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const StatusBar = forwardRef<HTMLDivElement, StatusBarProps>((props, ref) => {
  const {
    chineseText = '运营现状',
    englishText = 'OPERATION STATUS',
    noResponsiveScale = false,
    theme = 'dark',
    onClick,
    style = {},
    className = '',
    iconUrl,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const classNames = [
    'hzdz-status-bar',
    `hzdz-status-bar--${theme}`,
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  let iconEl = null;
  //  const iconUrl = '/static/images/yingjiguanli/编组 31.png'; // 替换为实际图标路径
  if (iconUrl) {
    iconEl = createElement('img', {
      src: iconUrl,
      alt: 'icon',
      className: 'hzdz-status-bar__icon',
    });
  }

  return createElement('div', {
    ref,
    className: classNames,
    style,
    onClick: handleClick,
    ...otherProps
  }, createElement('div', {
    className: 'hzdz-status-bar__content'
  }, [
    createElement('div', {
      key: 'chinese',
      className: 'hzdz-status-bar__chinese-text'
    }, chineseText),
    createElement('div', {
      key: 'english',
      className: 'hzdz-status-bar__english-text'
    }, englishText),
    iconEl
  ]));
});

StatusBar.displayName = 'StatusBar';

export default StatusBar;
